<%@ page import="com.zzn.bookManage.pojo.ResultEntity" %>
<%@ page import="com.zzn.bookManage.pojo.Book" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="loginUser" class="com.zzn.bookManage.pojo.User" scope="session"/>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>首页</title>
  <%@ include file="head.jsp" %>
</head>
<body>

<%!
  ResultEntity<Book> result;
  List<Book> books;
  String msg;
%>
<%
  request.setCharacterEncoding("UTF-8");
  msg = (String) request.getAttribute("msg");
  result = (ResultEntity<Book>) request.getAttribute("result");
  result = result!=null? result :new ResultEntity<>();
  books = result.hasData()?result.getData():new ArrayList<>();
%>

<div id="app">
  <div class="container">
    <div class="row primary-bg align-items-center">
      <div class="col-3">
        <img src="./assets/logo.png" class="m-auto card-img-top" alt="logo" style="width: 80px">
      </div>
      <div class="col-auto ml-auto">
        <span>Hello! <strong><%=loginUser.getNickname()%></strong></span>
        <form action="${pageContext.request.contextPath}/userLogout" method="post" style="display: inline">
          <button type="submit" class="btn btn-sm btn-info ml-4">退出登录</button>
        </form>
      </div>
    </div>
    <div class="row">
      <!--      侧边栏-->
      <div class="col-md-2 col-sm-1 secondary-bg px-0" style="height: 800px">
        <div class="btn-group-vertical full-width" role="group" aria-label="Basic example">
          <button type="button" class="btn  full-width btn-my-primary-active" autofocus>首页</button>
          <a href="${pageContext.request.contextPath}/setting.jsp" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">用户设置</button>
          </a>
          <a href="${pageContext.request.contextPath}/listBorrow?page=1" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">借阅管理</button>
          </a>
        </div>
      </div>
      <!--      内容部分-->
      <div class="col-md-10 col-sm-11 bg-white" style="overflow: auto">
        <div class="row mt-2">

          <%
            if (msg!=null && !"".equals(msg)){
          %>
          <div class="alert alert-danger alert-dismissible fade show full-width mx-2" role="alert">
            <span><%=msg%></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <%
            }
          %>

          <div class="col-12"><h5>图书管理</h5></div>

          <div class="col-12">
            <table class="table table-striped">
              <thead>
              <tr>
                <th scope="col" class="text-center">#</th>
                <th scope="col" class="text-center">书名</th>
                <th scope="col" class="text-center">作者</th>
                <th scope="col" class="text-center">出版社</th>
                <th scope="col" class="text-center">存放位置</th>
                <th scope="col" class="text-center">借阅者</th>
                <th scope="col" class="text-center">到期时间</th>
                <th scope="col" class="text-center">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in books">
                <th class="text-center" scope="row">{{item.seq}}</th>
                <td class="text-center">{{item.name}}</td>
                <td class="text-center">{{item.author}}</td>
                <td class="text-center">{{item.publisher}}</td>
                <td class="text-center">{{item.position}}</td>
                <td class="text-center">{{item.borrowBy}}</td>
                <td class="text-center">{{myDateFormat(item.expireTime)}}</td>
                <td class="text-center">
<!--                  详情弹窗-->
                  <button type="button" @click="showBookDetail(item)" class="btn btn-sm btn-my-primary" title="点击查看详情"
                  data-toggle="modal" data-target="#bookInfo">详情
                  </button>
<!--                  修改 请求修改信息接口-->
                  <a :href="'${pageContext.request.contextPath}/gotoEditBook?bid='+item.bid">
                  <button type="button"  class="btn btn-sm btn-info" title="点击修改图书信息">修改</button>
                  </a>
<!--                  删除弹窗-->
                  <button type="button" @click="deleteBook(item)" class="btn btn-sm btn-info" data-toggle="modal" :title="!!item.borrowBy?'需要先归还图书':'点击删除图书'"
                          data-target="#confirmDelete" :disabled="!!item.borrowBy">删除
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>


        </div>
        <!--        分页-->
        <nav aria-label="Page navigation" class="">
          <ul class="pagination justify-content-end">
            <li class="mr-3">
              <a href="${pageContext.request.contextPath}/newBook.jsp" class="">
                <button type="button" class="btn btn-info">新建图书</button>
              </a>
            </li>

            <%
              for (int i = 0; i < result.getRecords(); i++) {
            %>
            <li class="page-item <%=result.getPage()==(i+1)?"active":""%>">
              <a class="page-link" href="${pageContext.request.contextPath}/list?page=<%=i+1%>"><%=i+1%></a>
            </li>
            <%
              }
            %>

          </ul>
        </nav>


        <!--    删除弹窗-->
        <div class="modal fade" id="confirmDelete" tabindex="-1" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteLabel">确认删除吗？</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                确认删除 《{{ deleteBookName }}》 吗？
              </div>
              <div class="modal-footer">
                <form action="${pageContext.request.contextPath}/deleteBook" method="post">
                  <input type="text" class="d-none" name="bid" :value="bid">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                  <button type="submit" class="btn btn-primary">删除</button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!--    详情弹窗-->
        <div class="modal fade" id="bookInfo" tabindex="-1" aria-labelledby="bookInfoLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="bookInfoLabel">图书详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-2">
                    书名：
                  </div>
                  <div class="col-4">
                    {{bookDetail.name}}
                  </div>
                  <div class="col-2">
                    作者：
                  </div>
                  <div class="col-4">
                    {{bookDetail.author}}
                  </div>

                  <hr class="my-1 full-width">

                  <div class="col-2">
                    出版社：
                  </div>
                  <div class="col-4">
                    {{bookDetail.publisher}}
                  </div>
                  <div class="col-2">
                    参考价格：
                  </div>
                  <div class="col-4">
                    {{bookDetail.price}}
                  </div>

                  <hr class="my-1 full-width">

                  <div class="col-2">
                    存放位置：
                  </div>
                  <div class="col-10">
                    {{bookDetail.position}}
                  </div>

                  <hr class="my-1 full-width">

                  <div class="col-2">
                    简介：
                  </div>
                  <div class="col-10">
                    {{bookDetail.description}}
                  </div>

                  <hr class="my-1 full-width">

                  <div class="col-2">
                    创建时间：
                  </div>
                  <div class="col-10">
                    {{myDateFormat(bookDetail.createTime)}}
                  </div>

                  <hr class="my-1 full-width">

                  <div class="col-2">
                    到期时间：
                  </div>
                  <div class="col-10">
                    {{myDateFormat(bookDetail.expireTime)}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            content: '',
            deleteBookName: '',
            bid: '',
            books: [

                <%
                  for(int i = 0; i < books.size(); i++) {
                    int seq = result.getCount()-(result.getPage()-1)*result.getRow() - i;
                    Book b = books.get(i);
                %>
                {
                    seq: '<%=seq%>',
                    bid: '<%=b.getBid()%>',
                    name: '<%=b.getName()%>',
                    author: '<%=b.getAuthor()%>',
                    publisher: '<%=b.getPublisher()%>',
                    position: '<%=b.getPosition()%>',
                    description: '<%=b.getDescription()%>',
                    price: '￥<%=b.getPrice()%>',
                    expireTime: '<%=b.getExpireTime()!=null?b.getExpireTime():""%>',
                    borrowBy: '<%=b.getBorrowBy()!=null?b.getBorrowBy().getNickname():""%>',
                    createTime: '<%=b.getCreateTime()%>',
                },

                <%
                  }
                %>

            ],
            bookDetail: {},
        },
        methods: {
            myDateFormat(dateStr='') {
                let str = dateStr.split('.')[0].split(' ')
                let now = new Date();
                let ii = new Date(dateStr);
                if (now.getDate() === ii.getDate()) {
                    return '今天 ' + str[1]
                } else if (now.getDate() === ii.getDate() - 1) {
                    return '昨天 ' + str[1]
                } else {
                    return dateStr.split('.')[0]
                }
            },
            deleteBook: function (item) {
                this.deleteBookName = item.name
                this.bid = item.bid
            },
            showBookDetail: function (item) {
                this.bookDetail = item
            }
        },
        computed: {
            contentLength: function () {
                return this.content.length
            }
        },
    })
</script>
</body>
</html>
